* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.clearfix::after {
    clear: both;
    content: "\200B";
    height: 0;
    display: block;
}

.change-btn{
    font-size:0;
}
.net-btn,
.list-btn {
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    font-size:20px;
    display:inline-block;
    background-color: #c12bf9;
}

.list-btn {
    background-color: #f92ba4;
}

.item-list {
    /* float:left; */
    width: 100%;
    height: 100px;
}

ul >li:nth-child(1),ul >li:nth-child(5){
    background-color: #f92ba4;
}

ul >li:nth-child(2),ul >li:nth-child(6) {
    background-color: #e32bf9;
}

ul >li:nth-child(3) ,ul >li:nth-child(7){
    background-color: #2b30f9;
}

ul >li:nth-child(4),ul >li:nth-child(8) {
    background-color: #2bf95b;
}
 


.trans-odd{
    width:50%;
    transition: width ease-in .4s;
}

.trans-even {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
    width: 50%;
    transition: -webkit-transform ease-in .5s;
    transition: transform ease-in .5s;
    transition: transform ease-in .5s, -webkit-transform ease-in .5s;
}


.top-move{
    margin-top:-100px;
    transition:margin-top ease-in .5s;
}